<template>
  <div>
    <p class="list-title" v-html="title"></p>
    <div class="list-box judge-box">
      <ul>
        <li class="input-select-radio" v-for="(answer, index) in question.answer_list" :key="index">
          <input type="radio" :id="answer.id" :name="answer.name" :value="answer.value" v-model="userAnswer" :disabled="disable">
          <label :for="answer.id">{{answer.content}}</label>
        </li>
        <li class="li-answer" v-if="showAnswer">
          <span>您的答案：<i class="color-red">{{question.user_answer == '1' ? 'True': 'False'}}</i></span>
          <span>正确答案：<i class="color-green">{{question.right_answer == '1' ? 'True': 'False'}}</i></span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: "panduan",
    componentType: 'question',
    props: {
      index: Number,
      question: Object,
      disable: {
        type: Boolean,
        default: false
      },
      showAnswer: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        userAnswer: ''
      };
    },
    mounted () {
      if (this.question.user_is_answer) {
        this.userAnswer = this.question.user_answer;
      }
    },
    //新增更新question
    watch: {
      'question' (val) {
        if (val && val.user_is_answer) {
          this.userAnswer = val.user_answer;
        }
      }
    },
    computed: {
      title () {
        if (this.question) {
          let question = this.question.question;
          let questionTitle = question.replace(/\[\]/g, function () {
            return `<span class="blanks"><i></i></span>`
          });

          return `${this.index}. ${questionTitle} <span class="mark">&nbsp;&nbsp;(${this.question.score}分)</span>`;
        }
        return '';
      }
    },
    methods: {
      checkUserAnswer () {
        return !this.userAnswer;
      },
      getQuestionAnswer () {
        let answer = {};
        answer.id = this.question.id;
        answer.question_type = this.question.question_type;
        answer.answer = this.userAnswer;
        return answer;
      }
    }
  }
</script>
